<template>
    <div class="lunbo">
        <div class="lunbo-box">
            <div class="lunbo-main">
                <div class="lunbo_list">
                    <!-- <span class="button1">
                        <i class="icon icon1"></i>
                    </span> -->
                    <div class="slider_list">
                        <swiper :options="swiperOption" ref="mySwiper"  class=""> 
                            <!-- slides -->
                            <swiper-slide><img src="../../../../assets/img/header/5c36e9b9361c4a24.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/678b44691082400c.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/95180c1350acf65c.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/27250942ac22ba43.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/ba4c485de5bc1922.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/d400ef677c78b1f5.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/e2105048e89408f5.jpg" alt=""></swiper-slide>
                            <swiper-slide><img src="../../../../assets/img/header/d400ef677c78b1f5.jpg" alt=""></swiper-slide>
                            <!-- Optional controls -->
                            <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
                            <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
                        </swiper>
                    </div>
                    <!-- <span class="button2">
                        <i class="icon icon2"></i>
                    </span> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import Banner1 from '../../../../assets/img/header/5c36e9b9361c4a24.jpg'
// import Banner2 from '../../../../assets/img/header/678b44691082400c.jpg'
// import Banner3 from '../../../../assets/img/header/95180c1350acf65c.jpg'
// import Banner4 from '../../../../assets/img/header/27250942ac22ba43.jpg'
// import Banner5 from '../../../../assets/img/header/ba4c485de5bc1922.jpg'
// import Banner6 from '../../../../assets/img/header/d400ef677c78b1f5.jpg'
// import Banner7 from '../../../../assets/img/header/e2105048e89408f5.jpg'
// import Banner8 from '../../../../assets/img/header/5c36e9b9361c4a24.jpg'
export default {
    name:'LunBo',
    data(){
        return {
             swiperOption: {
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay:true,
            },
        }
    },
    components:{
        swiper,
        swiperSlide
    }
}
</script>
<style lang="less" scoped>
.lunbo{
    float: left;
    width: 590px;
    height: 480px;
    margin-right: 10px;
    .lunbo-box{
        position: relative;
        float: left;
        width: 590px;
        height: 470px;
        margin-top: 10px;
        overflow: hidden;
        .lunbo-main{
            height: 470px;
            .lunbo_list{
                overflow: hidden;
                width: 100%;
                height: 100%;
                // span{
                //     cursor: pointer;
                //     position: absolute;
                //     z-index: 1;
                //     top: 50%;
                //     margin-top: -20px;
                //     width: 24px;
                //     height: 40px;
                //     background-color: rgba(0, 0, 0, 0.2);
                //     color: #fff;
                //     color: rgba(255, 255, 255, 0.4);
                //     line-height: 40px;
                //     text-align: center;
                //     .icon{
                //         display: inline-block;
                //         width: 10px;
                //         height: 11px;
                //         background-repeat: no-repeat;

                //         background-image: url("../../../../assets/img/header/iconn.png");
                //         transition: color .2s ease;
                //     }
                //     .icon1{
                //         background-position: -18px -99px;
                //     }
                //     .icon2{
                //         background-position: -26px -99px;
                //     }
                // }
                // .button1{
                //     left: 0;
                // }
                // .button2{
                //     right: 0;
                // }        
                // span:hover{
                //     color: #fff;
                //     background-color: #000;
                //     background-color: rgba(0, 0, 0, 0.5);
                // }
                .slider_list{
                    overflow: hidden;   
                }
            }
        }
    }
}
.swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
}
</style>

